<template>
  <div class="car-container" :class="traffic===1?  '' : 'paused-animation'">
    car
  </div>
</template>
<script>
import { mapMutations, mapState } from 'vuex'
export default {
  watch: {
    traffic(v) {
      console.log('car....:', v)
    }
  },
  mounted() {
    // console.log('this.mounted', this.traffic)
  },
  computed: {
    ...mapState(['traffic'])
  },
  methods: {

  },
}
</script>
<style lang="scss" scoped>
  .car-container {
    width: 60px;
    height: 45px;
    background: lightcoral;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    animation: carAnimaion 10s linear infinite;
  }
  @keyframes carAnimaion {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(1000px, 0);
    }
  }

  .paused-animation {
     animation-play-state: paused; // running
  }
</style>
